<template>
 <div>
   <img src="@/assets/image/bg-image/bg1.jpg" alt="" class="bg">
  <el-alert
    v-show="flag"
    :title= title
    :type= type
    show-icon>
  </el-alert>
  <div class="LogMainBox">
    <div class="discript">
      <slot name="welcome"></slot>
      <img src="@/assets/image/bg-image/bg2.png" class="bg2">
    </div>
    <div class="Login">
      <slot name="title"></slot>
    <div class="loginBox">
        <el-form
        :model="person"
        :rules="rules"
        ref="person"
        status-icon
        :label-position="labelPosition" 
        label-width="65px"  
        v-if="this.loginflag"
        @keyup.enter.native="getLogin">
          <el-form-item label="电话" prop="phone">
            <el-input 
            v-model="person.phone"
            placeholder="请输入电话号码"
            clearable
            required="required"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
            v-model="person.password"
            placeholder="请输入密码"
            show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码" class="vcode" prop="captchaCode">
            <el-input 
            v-model="person.captchaCode"
            placeholder="请输入验证码"
            clearable
            style="width:50%;margin-right:15px"
            ></el-input>
              <el-image 
            :src="imgUrl" 
              style="width: 100px; height: 30px;"
              @click="getImgCode"
            >
            </el-image>
          </el-form-item>
      </el-form>
      <!-- 邮箱登录 -->
        <el-form
        :model="person"
        :rules="rules"
        ref="person"
        status-icon 
        :label-position="labelPosition" 
        label-width="65px" 
        v-else
        @keyup.enter.native="getLogin">
          <el-form-item label="邮箱" prop="email">
            <el-input 
            v-model="person.email"
            placeholder="请输入邮箱地址"
            clearable
            required="required"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码" class="vcode" prop="code">
            <el-input 
            v-model="person.code"
            placeholder="请输入验证码"
            clearable
            style="width:50%;margin-right:15px"
            ></el-input>
              <!-- <el-button type="success" @click="getRegCode" style="width:100px" :disabled="wait_timer>0">
                
              </el-button> -->
            <el-button 
            type="success"
            style="width: 100px; height: 30px;"
            @click="getEmailCode"
            :disabled="wait_timer>0">
                <span
                v-show="showNum"
                v-bind:class="{num:wait_timer>0}" >
                {{this.wait_timer + "s "}}
                </span>
                <span>
                {{ getCodeText() }}
                </span>
            </el-button>
          </el-form-item>
      </el-form>
        <el-button
        type="success"
        @click="getLogin"
        style="width:250px; margin-top:10px"
        >登录</el-button>
        <!-- <slot name="loginBtn"></slot> -->
        <!-- 切换登录权限 -->
        <el-link 
         type="success"
         :underline="false"
         style="fontSize:13px;margin-top:15px;margin-right:15px">
         <slot name="checkLoginIdentity"></slot>
         </el-link>
         <!-- 切换登录方式 -->
         <el-link 
         type="success"
         :underline="false"
         style="fontSize:13px;margin-top:15px;margin-left:15px">
         <slot name="checkLoginWay"></slot>
         </el-link>
      </div>
  </div>
</div> 
</div>
</template>

<script>
import api from '@/api/user_index.js'
 export default {
  name: 'login' ,
 data () {
  var checkPhone = (rule, value, callback) => {
      if (value.trim() == "") {
        callback(new Error("请输入电话"));
      } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
        callback(new Error("电话输入错误！"));
      } else {
        callback();
      }
    };
var checkEmail = (rule, value, callback) => {
            if (!value) {
                return callback();
            }
            if (value) {
                setTimeout(() => {
                    var reg = /^([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
                    if (!reg.test(value)) {
                        callback(new Error('请输入有效的电子邮箱！'));
                    } else {
                        callback();
                    }
                }, 500);
            }
        };
 return {
   person:{
      password: '',
      phone: '',
      captchaCode: '',
      email: '',
      code: '',
   },
   rules:{
     password: [{ required: true, message:'请输入密码', trigger: "blur" }],
     phone: [{ required: true, message: '请输入手机号', validator: checkPhone, trigger: "blur" }],
     captchaCode: [{ required: true, message: '请输入验证码', trigger: "blur" }],
     email: [{ required: true, message: '请输入邮箱', validator: checkEmail, trigger: "blur" }],
     code: [{ required: true, message: '请输入验证码', trigger: "blur" }]
   },
   title: '',
   type: 'success',
   flag:false,
   imgUrl:'http://106.15.195.184:10010/user/login/capthca',
   labelPosition:'left',
   showNum: false,
   wait_timer: false,
  }
 },
 props:[
   'btnflag',
   'loginflag'
 ],
 methods:{
   getLogin(){
    // 管理员
     if(this.btnflag === 0){
          api.getAdminLogin(this.person).then((res) => {
          console.log(res)
          if(res.code == 200){
            this.flag = true
            this.title = "登录成功!"
            this.description = '3秒后跳转到主页'
            // this.$store.commit('setPerson',this.person)
            // console.log(sessionStorage.getItem('person'));
            setTimeout(() => {
              this.$router.push({path:'/home',query:{usrename:this.person.username}})
            }, 3000);
          }else{
            this.flag = true
            this.type = 'error'
            this.title = res.message
          }
      }).catch((err) => {
          console.log(err)
      })
      // 普通用户登录
     }else if(this.btnflag == 1){
       console.log(this.person)
       if(this.loginflag){
            // 电话密码登录 
            api.getUserLogin(this.person).then((res) => {
              console.log(res)
              if(res.code === 200){
              const token = res.obj.token
              localStorage.setItem('token',token)
                this.flag = true
                this.title = "登录成功!"
                // sessionStorage.get(this.person)
                // this.description = '3秒后跳转到主页'
                setTimeout(() => {
                  this.$router.push({
                    path:'/home',
                    query:{
                      usrename: res.obj.username,
                      account: res.obj.account
                    }
                  })
                }, 1000);
              }else{
                this.$alert('请重新输入！', res.message ,{
                  confirmButtonText: '确定',
                })
              }
          }).catch((err) => {
              console.log(err)
          })
       }
       else{
        // 邮箱登录
          api.getEmailLogin(this.person).then((res) => {
            console.log(res)
            // this.person.username = res.obj.username
            if(res.code == 200){
              this.flag = true
              this.title = "登录成功!"
              const token = res.obj.token
              localStorage.setItem('token',token)
              // this.$store.commit('setPerson',this.person)
              setTimeout(() => {
                this.$router.push({
                  path:'/home',
                  query:{
                    usrename: res.obj.username,
                     account: res.obj.account
                     }
                  })
              }, 1000);
            }else{
              this.$alert('请重新输入！', res.message ,{
                  confirmButtonText: '确定',
                })
            }
        }).catch((err) => {
            console.log(err)
        })
       } 
     }
   },
   getImgCode(){
    this.imgUrl = "http://106.15.195.184:10010/user/login/capthca?" + Math.random()
   },
   getEmailCode(){
     this.showNum = true;
      this.wait_timer = 60;
      var that = this;
      var timer_interval = setInterval(function() {
        if (that.wait_timer > 0) {
          that.wait_timer--;
        } else {
          clearInterval(timer_interval);
        }
      }, 1000); 
     api.getEmailCode(this.person.email).then((res) => {
       console.log(res)

     })
   },
   getCodeText(){
     if (this.wait_timer > 0) {
        return "";
      }
      if (this.wait_timer === 0) {
        this.showNum = false;
        return "重新发送";
      }
      if (this.wait_timer === false) {
        return "发送验证码";
      }
   }
 }
}

</script>
<style scope lang="less">
.bg{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -10;
  }
  .LogMainBox{
    position: absolute;
    top: 15%;
    left: 25%;
    height: 380px;
    width: 750px;
    display: flex;
    .discript{
      position: relative;
      left: 15px;
      width: 350px;
      height: 380px;
      // border: 1px solid #67C23A;
      // border-right: none;
      border-radius: 10px;
      color: #28627C;
      background-color: rgba(255, 255, 255, 0.5);
      text-align: center;
      img{
        width: 250px;
        height: 300px;
        border-radius: 8px;
      }
    }
    .Login{
    width: 400px;
    height: 380px;
    background-color: #fff;
    text-align: center;
    margin: 0 auto;
    border: 1px solid #CBEAE2;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #ccc;
    .title{
      height: 90px;
      .switchBox{
        display: flex;
        justify-content: space-around;
        height: 60px;
        width: 400px;
        .adminlogin{
          height: 55px;
          width: 400px;
          line-height: 50px;
          border-bottom: 1px solid #ccc;
          box-shadow: 1px 2px 2px #ccc;
        }
        .reg,.userlogin{
          height: 55px;
          width: 250px;
          line-height: 50px;
          border-bottom: 1px solid #ccc;
          box-shadow: 1px 2px 2px #ccc;
        }
        .reg{
          border-left: 3px solid #67C23A;
        }
      }
    }
    .loginBox{
      margin-top: 10px;
      margin-left: 50px;
      width: 300px;
    }
    }
  }
</style>